---
title: "Meter"
description: A graphical representation of a measured value within a fixed range, perfect for showing scores, ratings, or resource usage.
order: 4
published: true
references: ["https://react-spectrum.adobe.com/react-aria/Meter.html#props"]
---


## Basic

A meter displays a value within a specified range, showing how much of the total range is currently occupied. Unlike a progress bar, which typically indicates progress towards completing a task over time, a meter reflects a specific measurement or quantity at a given moment.

<How minW60 toUse="statuses/meter/meter-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/meter
```


## Composed components
<Composed components={['field']}/>

## Manual installation
```bash
npm i react-aria-components
```

## Anatomy
```
import { Meter } from "@/components/ui/meter"

<Meter label="Storage space" value={32} />
```

## Decimal format
By default, the meter will display the value as a percentage. You can change the format of the value by passing a `formatOptions` prop. This example is shown decimal format.

<How minW60 toUse="statuses/meter/meter-decimal-format-demo" />

## Currency format
You can also change the currency format of the value by passing a `formatOptions` prop. This example is shown currency format.

<How minW60 toUse="statuses/meter/meter-currency-format-demo" />
